<template>
  <div class="app-container">
    <!-- <hear></hear> -->
    <!-- <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">backoff
  </el-image> -->
    <div class="backoff">
      <div>
        <!-- <el-button v-if="shenqingInfo.state == 2" class="anniu">退保</el-button>

        <el-button v-if="shenqingInfo.state == 2" class="anniu">续保</el-button>
        放弃保函  和上面的不兼容  支付之前叫做放弃保函    
        <el-button
          v-if="shenqingInfo.state == 1 || shenqingInfo.state == 0"
          class="anniu"
          >放弃保函</el-button
        > -->
        <el-button class="anniu" @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
    <el-tabs class="tac" tab-position="left">
      <el-tab-pane style="height: 100%" label="保函信息">
        <!-- {{shenqingInfo}} -->
        <el-form
          :model="shenqingInfo"
          label-width="170px"
          :disabled="true"
          class="fromsBox"
        >
          <el-form-item label="申请编号 :">
            <el-input
              v-model="shenqingInfo.apply_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="保函编号 :">
            <el-input
              v-model="shenqingInfo.guarantee_apply_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="标段编号 :">
            <el-input
              v-model="shenqingInfo.bidding_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="标段名称 :">
            <el-input
              v-model="shenqingInfo.bidding_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="开标时间 :">
            <el-input
              :value="shenqingInfo.create_time | dateFormat"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目总额 :">
            <el-input
              v-model="shenqingInfo.guarantee_company_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="保费金额 :">
            <el-input
              v-model="shenqingInfo.margin_amount"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="保函状态 :">
            <!-- "state": 2, //保函状态，0：申请中，1：审核中，2：审核通过，3：审核不通过 -->
            <el-input
              v-show="shenqingInfo.state == 0"
              value="申请中"
              autocomplete="off"
            ></el-input>
            <el-input
              v-show="shenqingInfo.state == 1"
              value="审核中"
              autocomplete="off"
            ></el-input>
            <el-input
              v-show="shenqingInfo.state == 2"
              value="审核通过"
              autocomplete="off"
            ></el-input>
            <el-input
              v-show="shenqingInfo.state == 3"
              value="审核不通过"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane  style="height: 100%" label="申请文件">
        <!-- <el-form :model="shenpiFile" label-width="170px" :disabled="true" class="fromsBox">
                    <div v-for="item in shenqishenpiFilengInfo" :key=item>
                        <el-form-item label="文件名称 :">
                            <el-input :value="item.filename" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="记录时间 :">
                            <el-input v-if="item.createtime==null" value="" autocomplete="off"></el-input>
                            <el-input v-else :value="item.createtime | dateFormat" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="文件 :">
                            <img width="49%" height="128" :src="$baseUrl + item.filepath" alt />
                        </el-form-item>
                    </div>

                </el-form> -->
        <div style="padding: 0 1%" class="fromsBox">
          <div
            v-for="item in shenqishenpiFilengInfo"
            :key="item"
            class="public-kuang"
          >
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <img src="@/assets/imges/pdf.png" alt="" srcset="" class="pdf" />
            </div>
            <div style="display: flex; flex-direction: column; flex: 1">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div class="kuang-txt">
                  <div class="kuang-1">{{ item.filename }}</div>
                </div>
                <!---->
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <div
                      @click="yulan(item.filepath)"
                      class="kuang-2"
                    >
                      预览
                    </div>
                    <div
                      class="kuang-2"
                      @click="xiazai"
                      style="margin-left: 10px"
                    >
                      下载
                    </div>
                  </div>
                </div>
                <!---->
              </div>
              <div style="margin-top: 5px; margin-left: 1.25rem">
                <!-- <div>保函文件：{{item.filepath}}</div> -->
                <div>
                  下载地址：<a
                    target="_blank"
                    :href="$baseUrl + item.filepath"
                    >{{
                      item.filepath == null ? "" : $baseUrl + item.filepath
                    }}</a
                  >
                </div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane style="height: 100%" label="保函文件"> 
             <div style=" padding: 0 1%;" class="fromsBox">
           <div v-for="item in baohanFile" :key=item class="public-kuang">
                <div style="display: flex;
    justify-content: center;
    align-items: center;">
              <img
                src="@/assets/imges/pdf.png"
                alt=""
                srcset=""
                class="pdf"
              />
          </div>
          <div style="     display: flex;
                  flex-direction: column;flex: 1;">
    <div
            style="
              display: flex;
       
              justify-content: space-between;
              align-items: center;
          
            "
          >
      
            <div class="kuang-txt">
            
              <div class="kuang-1">{{item.filename}}</div>
            </div>
            <!---->
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div @click="yulan(item.qz_file)" class="kuang-2">预览</div>
                <div class="kuang-2" @click="xiazai" style="margin-left: 10px">下载</div>
              </div>
            </div>
            <!---->
          </div>
          <div style="margin-top: 5px;    margin-left: 1.25rem;">
            <!-- <div>保函文件：{{item.filepath}}</div> -->
            <div >下载地址：<a target="_blank" :href="$baseUrl + item.qz_file">{{ item.qz_file==null ? "" : $baseUrl + item.qz_file}}</a></div>
            <div></div>
          </div>
          </div>
      
        </div>
     </div>
      </el-tab-pane>
      <el-tab-pane  v-if="ciaosd"  style="height: 100%" label="施工单位">
        <el-form
          :model="formLabelAlign"
          label-width="170px"
          :disabled="true"
          class="fromsBox"
        >
          <el-form-item label="申请公司名称 :">
            <el-input
              v-model="formLabelAlign.company_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="法人姓名 :">
            <el-input
              v-model="formLabelAlign.corporate_information"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人联系方式 :">
            <el-input
              v-model="formLabelAlign.corporate_phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人身份证号 :">
            <el-input
              v-model="formLabelAlign.corporate_id_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人身份证 :">
            <img
              width="49%"
              height="128"
              :src="$baseUrl + formLabelAlign.id_card_front"
              alt
            />
            <img
              width="49%"
              height="128"
              :src="$baseUrl + formLabelAlign.id_card_reverse"
              alt
            />
          </el-form-item>
          <el-form-item label="统一社会信用代码 :">
            <el-input
              v-model="formLabelAlign.unify_social_credit_code"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业性质 :">
            <el-input
              :value="formLabelAlign.guarantee_company_type"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业地址 :">
            <el-input
              v-model="formLabelAlign.contact_address"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户行 :">
            <el-input
              v-model="formLabelAlign.account_bank"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="账户 :">
            <el-input
              v-model="formLabelAlign.basic_account"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联行号 :">
            <el-input value="" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="营业执照 :">
            <img
              width="49%"
              height="128"
              :src="$baseUrl + formLabelAlign.business_license_pic"
              alt
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane  v-if="ciaosd"  style="height: 100%" label="出函机构">
        <el-form
          :model="chjg"
          label-width="170px"
          :disabled="true"
          class="fromsBox"
        >
          <el-form-item label="公司名称 :">
            <el-input
              v-model="chjg.guarantee_company_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人姓名 :">
            <el-input v-model="chjg.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="法人联系方式 :">
            <el-input v-model="chjg.mobile" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码 :">
            <el-input v-model="chjg.unify_code" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="公司类型 :">
            <el-input
              :value="chjg.guarantee_company_type"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司地址 :">
            <el-input v-model="chjg.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="开户行 :">
            <el-input v-model="chjg.bankname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账户 :">
            <el-input v-model="chjg.bankcode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联行号 :">
            <el-input value="" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="费率 :">
            <el-input
              v-model="chjg.guarantee_company_rate"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="营业执照 :">
            <img
              width="49%"
              height="128"
              :src="$baseUrl + chjg.business_license_pic"
              alt
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane  v-if="ciaosd"  style="height: 100%" label="支付记录">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          class="table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column align="center" type="selection" width="55">
          </el-table-column>
          <el-table-column
            align="center"
            prop="apply_number"
            :show-overflow-tooltip="true"
            label="保函编号"
            width="120"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="username"
            :show-overflow-tooltip="true"
            label="付款人"
            width="120"
          >
          </el-table-column>

          <!-- <el-table-column align="center" prop="khsh " :show-overflow-tooltip="true" width="220" label="申请公司税号"> </el-table-column> -->
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="zftype"
            width="120"
            label="付款类型"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="money"
            width="120"
            label="支付金额"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="guarantee_company_name"
            width="120"
            label="出函机构名称"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="bankname"
            width="120"
            label="银行"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="bankcode"
            width="120"
            label="银行卡号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="bankaccount"
            width="120"
            label="银行账号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="image"
            width="120"
            label="支付凭证"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="rebankname"
            width="120"
            label="付款银行名称"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="rebankaccount"
            width="120"
            label="付款银行账号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="state"
            width="220"
            label="支付状态"
          >
            <!-- <template slot-scope="scope">{{
                scope.state ==0 ? "未支付" : "支付"
              }}</template> -->
            <template slot-scope="scope">{{
              scope.row.state == 0 ? "未支付" : "支付"
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="createtime"
            width="220"
            label="支付时间"
          >
            <template slot-scope="scope">{{
              scope.row.createtime | dateFormat
            }}</template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="createtime" width="220" label="分配时间"> </el-table-column> -->
          <!-- <el-table-column align="center" prop="createtime" label="创建时间" width="200">
      </el-table-column> -->
          <el-table-column
            fixed="right"
            align="center"
            width="120"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- <el-button size="mini" @click="handleUpdate(scope.row)"
            >添加步骤</el-button
          >
             <el-button size="mini" @click="buzhlist(scope.row)"
            >步骤列表</el-button
          > -->
              <el-button size="mini" @click="handleUpdate(scope.row)"
                >申请发票</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentpage"
            :page-sizes="[10, 20, 30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="limit"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane  v-if="ciaosd"  style="height: 100%" label="快递记录"> </el-tab-pane>
      <el-tab-pane  v-if="ciaosd"  style="height: 100%" label="进度信息"> </el-tab-pane>
       <el-tab-pane    style="height: 100%" label="反担保信息"> 
    <div  class="datasa">
  
      <el-card class="box-card">
        <el-form
          ref="form"
          :model="formData"
          label-width="150px"
          class="con-from"
        >
          <div  style="display: flex">
            <el-form-item style="flex: 1" label="姓名 :">
              <el-input  disabled  v-model="fdbdetail.username"></el-input>
            </el-form-item>
            <el-form-item style="flex: 1" label="联系方式 :">
              <el-input disabled v-model="fdbdetail.mobile"></el-input>
            </el-form-item>
          </div>
          <!-- <div   style="display: flex">
            <el-form-item style="width: 50%" label="身份证号 :">
              <el-input disabled  v-model="fdbdetail.cardcode"></el-input>
            </el-form-item>
            <el-form-item style="flex: 1" label="邮箱 :">
              <el-input disabled  v-model="fdbdetail.email"></el-input>
            </el-form-item>
          </div> -->
          <el-form-item style="    margin-top: 10px;" class="" label="身份证正面">
            <el-row :gutter="110">
              <el-col :span="24">
                <div class="avatar" >
                  <div class="xinimg">
                    <i
                      class="el-icon-delete"
                      @click="sfzzImg()"
                      v-show="renzzhong"
                      style="z-index: 10"
                    ></i>
                  </div>
                  <img
                  class="zhaoimg"
                    :src="$baseUrl + fdbdetail.cardfront"
                    @click="zhengPreview()"
                  />
                  <!-- <i
                    class="el-icon-delete"
                    @click="sfzzImg()"
                    v-show="!detailShow"
                    style="z-index: 10"
                  ></i> -->
                </div>
  
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item class="" label="身份证反面">
            <el-row :gutter="110">
              <el-col :span="24">
                <div class="avatar" >
                  <div class="xinimg">
                    <i
                      class="el-icon-delete"
                      @click="sfzfImg()"
                      v-show="renzzhong"
                      style="z-index: 10"
                    ></i>
                  </div>
                  <img
                    class="zhaoimg"
                    :src="$baseUrl + fdbdetail.cardback"
                    @click="fanPreview()"
                  />
                  <!-- <i
                    class="el-icon-delete"
                    @click="sfzfImg()"
                    v-show="!detailShow"
                  ></i> -->
                </div>
        
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

       </el-tab-pane>
    </el-tabs>
    <!-- <binad></binad> -->
  </div>
</template>
    
<script>
// import hear from ".././../components/hear.vue";
// import binad from ".././../components/dinad.vue";
import { bhdetail } from "@/api/system/liucheng";
// import { snfiledown } from "@/api/xin.js";
export default {
  components: {
    // hear,
    // binad,
  },
  data() {
    return {
      renzzhong:false,
      formLabelAlign: {}, //申请公司信息
      chjg: {}, //出汗机构
      shenqingInfo: {}, //申请信息
      baohanFile: "", //保函文件
      shenqishenpiFilengInfo: "", //审批文件
      payList: "", //支付记录
      kdList: "", //快递记录
      applyno: "",
      tableData: [],
      jinduInfo: {}, //进度信息
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      ciaosd:false,
            formData: {
    id_card_front:"",
    id_card_reverse:"",
        cardfront: "", //身份证正面
        cardback: "", //身份证反面
        cardname: "", //姓名
        cardcode: null, //身份证号
        mobile: "", //手机号
email:"",//邮箱
fdbdetail:{username:"",
mobile:"",
cardfront:"",
cardback:"",
},
      },
    };
  },
  created() {
    //   this.get_weidaili();
    //   this.get_daili();
    this.getDetail(this.$route.query.company_id);
  },
  methods: {
    yulan(e) {
           this.$confirmMy({
        title: e,
       
      })
      return
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = e + "";
      // link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      // document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      document.body.removeChild(link);
    },
    async xiazai(e) {
      let url = e; //  download(url)
      var bbc = {
        applyno: this.applyno,
        type: 0,
      };
      const { data } = await snfiledown(bbc);
      this.xiazpdf(data.data);
    },
    xiazpdf(e) {
      var that = this;
      // res.data   就是后台返回的base64的 文件流
      let URL = this.dataURLtoBlob(e);
      var reader = new FileReader();
      reader.readAsDataURL(URL);
      reader.onload = function (e) {
        // 兼容IE
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(e.target.result.split(",")[1]);
          var n = bstr.length;
          var u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          var blob = new Blob([u8arr]);

          window.navigator.msSaveOrOpenBlob(blob, that.wenname);
        } else {
          // 转换完成，创建一个a标签用于下载
          var a = document.createElement("a");
          a.download = that.wenname;
          a.href = e.target.result;
          a.setAttribute("id", "export");
          document.getElementById("purchaseManage").append(a); // 修复firefox中无法触发click
          a.click();
          document.getElementById("export").remove();
        }
      };
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    dataURLtoBlob(dataurl) {
      var bstr = atob(dataurl);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: "pdf" });
    },
    // 获取详情
    getDetail(id) {
      bhdetail({
        apply_number: id,
      }).then((res) => {
        if(res.data.data.fdbdetail){
          this.fdbdetail=res.data.data.fdbdetail
        }
        
        console.log("详情", res.data.data);
        this.shenqingInfo = res.data.data.jiben;
        // console.log("shenqingInfo",this.shenqingInfo);
        // this.formLabelAlign = res.data.data.shenqing_company;
        this.shenqishenpiFilengInfo = res.data.data.ziliao;
      this.baohanFile = res.data.data.enclosure;
        // this.chjg = res.data.data.guarantee_company;
        this.tableData[0] = res.data.data.pay;
        // this.kdList = res.data.data.kuaidi;
        // this.applyno = res.data.data.jiben.apply_number
      });
    },
  },
};
</script>
<style scoped lang="scss">
.datasa{
  padding-top: 60px;
}
.weidaili_head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search {
  float: right;
  width: 20%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;

  ::v-deep.el-input__inner {
    border: none !important;
  }

  .el-button {
    border: none;
  }
}

::v-deep.el-input__inner {
  border: none !important;
}

.weidaili {
  height: 75vh;
  margin-bottom: 10px;
  overflow: hidden;
}

.block {
  width: 95%;
  padding-right: 5%;
  display: flex;
  justify-content: flex-end;
}

.showphoto {
  height: 553px;
  background: #f5f6fa;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.showphoto1 {
  height: 553px;
  background: #f5f6fa;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-tabs .el-tab-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // overflow-y: auto;
}

.app-container {
  //   height: calc(100vh + 50px);
  height: calc(100vh - 130px);
  padding-bottom: 0px;
  position: relative;
  // display: flex;
  // flex-direction: column;
  // position: relative;
}

// ::v-deep .el-tabs__content {
//   // height: 100% !important;
// }

.public-ku {
  margin-top: 1.375rem;
  width: 443.8px;
  height: 250px;
  margin-bottom: 1.25rem;
}

.kuang-txt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}

.pdf {
  width: 50px;
  height: 50px;
}

.kuang-1 {
  font-size: 1.1625rem;
  line-height: 2.3125rem;
  margin-left: 1.25rem;
  margin-top: 0.375rem;
  font-family: Microsoft YaHei;
  font-weight: 800;
  color: #333333;
}
.zhaoimg{
  width: 200px;
}
.fromsBox {
  width: 100%;
  overflow: auto;
  /* margin: 0px auto; */
  margin-top: 60px;
  padding: 0 15%;
  padding-bottom: 40px;

  .el-form-item {
    margin-bottom: 4px;
    margin-left: 20px;
  }
}

.title {
  font-weight: bold;
  margin-bottom: 10px;
}

.left {
  width: 70%;
  margin: 0px auto;
  margin-top: 60px;
}

.conter {
  margin-left: 20px;
  // width: 85%;
}

.backoff {
  position: absolute;
  z-index: 999;
  left: 222px;
  // top: 83px;
  // margin-left: 180px;
  display: flex;
  justify-content: flex-end;
  padding: 5px 0;
  box-sizing: border-box;

  div {
    width: calc(100vw - 240px);
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
  }

  .el-button {
    border: 1px solid;
  }
}

.rzBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%);

  .el-button {
    width: 150px !important;
  }
}

.renzhng {
  flex: 1;
  overflow-y: auto;
  padding: 0 10%;

  .el-form-item {
    margin-bottom: 4px;
  }
}

.footer {
  display: flex;
  padding-left: 10px;
  box-sizing: border-box;
  height: 45px;
  // justify-content: center;
  align-items: center;
  background-color: #f4f4f5 !important;

  .btn {
    width: 80px;
    height: 35px;
    border: 1px solid #1795ff;
  }
}

.table {
  margin-top: 50px;
}

.public-kuang {
  margin-top: 0.5rem;
  //   width: 750px;
  height: 85px;
  padding: 0.5125rem 0.55rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  //   flex-direction: column;
  /* justify-content: space-between; */
  /* align-items: center; */
  background: #ffffff;
  -webkit-box-shadow: 0rem 0rem 0.1875rem 0rem rgb(0 0 0 / 15%);
  box-shadow: 0rem 0rem 0.1875rem 0rem rgb(0 0 0 / 15%);
}

.kuang-txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 800;
}

.kuang-1 {
  font-size: 1.1625rem;
  line-height: 2.3125rem;
  margin-left: 1.25rem;
  margin-top: 0.375rem;
  font-family: Microsoft YaHei;
  font-weight: 800;
  color: #333333;
}

.kuang-2 {
  width: 4.125rem;
  height: 2.0375rem;
  line-height: 1.375rem;
  text-align: center;
  /* border-radius: 20px; */
  background: #069cff;
  border: 0.0625rem solid #069cff;
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  padding: 0.3125rem 0.5125rem;
  color: #fff;
}

.tac {
  height: 100%;
}

::v-deep .tac .el-tabs__content {
  height: 100%;
  overflow-y: auto;
}
::v-deep .el-tabs--left .el-tabs__item.is-left {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: end;
  font-size: 18px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #000000;
}

::v-deep .fromsBox .el-input__inner {
  width: 100% !important;
}
::v-deep .el-tabs--left .el-tabs__item.is-active {
  background: #1795ff;
  color: #fff;
}
::v-deep .el-tabs--left {
  height: 100%;
}
::v-deep .el-tabs__item {
  font-size: 16px;
}
</style>
    